<template>
  <el-dialog
    title="选择图标"
    :visible.sync="dialogVisible"
    :destroy-on-close="true"
    :close-on-click-modal="false"
    :append-to-body="true"
    @close="closeDialog"
  >
    <el-container>
      <div class="content font-class" style="height:650px;overflow:scroll;">
        <ul class="icon_lists dib-box">
          <li v-for=" item in icons" :key="item" class="dib" @click="choose(item)">
            <span class="icon iconfont " :class="item" />
          </li>
        </ul>
      </div>
    </el-container>
  </el-dialog>
</template>
<script>
export default {
  data() {
    return {
      dialogVisible: false,
      icons: ['icon-zuzhixiaxia', 'icon-smalltrees', 'icon-tree-table', 'icon-wodedingdan', 'icon-shouye', 'icon-yonghuguanli', 'icon-jiaoseguanli', 'icon-quanxianchaxun', 'icon-biaoqianguanli', 'icon-neirongguanli', 'icon-shenpiguanli', 'icon-shenpizuguanli', 'icon-shenpishezhi',
        'icon-wenzhenzixunguanli', 'icon-zixunguanli', 'icon-wenzhentuanduiguanli', 'icon-wenjuanguanli', 'icon-dingdanguanli1', 'icon-duizhangguanli', 'icon-duizhangtongji', 'icon-HISduizhang', 'icon-huanzheguanli', 'icon-yunyingguanli', 'icon-denglurizhi',
        'icon-zhanneixin', 'icon-manyidupingjia', 'icon-keshiliebiao', 'icon-iconfont5', 'icon-gouwuche1', 'icon-cuowu', 'icon-erweima', 'icon-jushoucang', 'icon-lajixiang', 'icon-lianjie', 'icon-naozhong', 'icon-saoyisao', 'icon-shangfan', 'icon-shezhi2',
        'icon-shengyin', 'icon-shijian', 'icon-zuzhijiagou1', 'icon-renyuan-', 'icon-04', 'icon-applications', 'icon-bumen', 'icon-guanliyuan'
      ]
    }
  },
  methods: {
    showDialog() {
      this.dialogVisible = true
    },
    closeDialog() {
      this.dialogVisible = false
    },
    choose(icon) {
      this.$emit('checked', icon)
      this.dialogVisible = false
    }
  }
}
</script>
<style scoped>
.icon_lists {
  width: 100% !important;
  *zoom: 1;
  display: flex;
  flex-wrap: wrap;
}

.icon_lists li {
  width:87px;
 margin-bottom: -1px;
margin-right: -1px;
text-align: center;
list-style: none !important;
cursor: default;
border: #e8e5e5 solid 1px;
}

.icon_lists li .code-name {
  line-height: 1.2;
}

.icon_lists .icon {
  display: block;
  height: 80px;
  line-height: 80px;
  font-size: 42px;
  margin: 10px auto;
  color: #333;
  -webkit-transition: font-size 0.25s linear, width 0.25s linear;
  -moz-transition: font-size 0.25s linear, width 0.25s linear;
  transition: font-size 0.25s linear, width 0.25s linear;
}

.icon_lists .icon:hover {
  font-size: 45px;
}

.icon_lists li .name,
.icon_lists li .code-name {
  color: #666;
}
</style>
